<template>
    <view style="display: flex;flex-direction: column;background: #f3f3f3;height: 100vh;">
        <div style="display: flex;flex-direction: column;margin-top: 200rpx;align-items: center;
       width: 300rpx;">
            <div style="font-size: 55rpx;">登录账号</div>
        </div>
        <view style="display: flex;flex-direction: column;">
            <view style="width: 90%; margin: 30rpx;">
                <view style="margin-top: 20rpx;">
                    <uni-easyinput v-model="from.username" prefixIcon="person" focus
                        placeholder="请输入账号"></uni-easyinput>
                </view>
                <view style="margin-top: 20rpx;">
                    <uni-easyinput type="password" v-model="from.password" prefixIcon="locked" focus
                        placeholder="请输入密码"></uni-easyinput>
                </view>
            </view>
            <view class="zhuce">
                <view class="zhuce1" @click="zhu">免费注册</view>
                <view class="yanzheng" @click="wangji">忘记密码</view>
            </view>
        </view>
        <div style="width: 100%;display: flex;justify-content: center;">
            <div style="background-color: #ff393c;width: 50%;height: 100rpx;
           display: flex;align-items: center;justify-content: center;border-radius: 20rpx;
           color: #f3f3f3;width: 95%; margin-top: 40rpx;" @click="hhh()">登录</div>
        </div>
        <div style="display: flex;flex-direction: column;width: 100%;margin-top: 50rpx;">
            <div style="margin: auto;" @click="wei()">
                <div style="text-align: center;">切换登录方式</div>
                <div style="width: 40%;margin: auto;margin-top: 10%;"><img src="/static/微信.png"
                        style="width: 80rpx;height: 70rpx;" />
                </div>
            </div>
        </div>
        <div class="propertyBox">
            登录即代表你同意<navigator style="color: #ff393c;">用户协议</navigator>和<navigator style="color: #ff393c;">隐私政策
            </navigator>
        </div>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                from: {
                    username: 'user123',
                    password: 'user123',
                },
                second: 60,
                showText: true,
            }
        },
        onLoad() {

        },
        methods: {
            hhh() {
                // uni.request({
                // 未封装的网络请求
                //     url: 'http://47.91.230.137:8086/wx/auth/login',
                //     method: "POST",
                //     data: this.from,
                //     success: (res) => {
                //         console.log(res)
                //         const data = res.data
                //         // debugger
                //         if (data.errno == 0) {
                //             // 跳转页面
                //             uni.switchTab({
                //                 url: '/pages/index/index'
                //             })
                //             // 未封装的写法
                //             // uni.showToast({
                //             //     title: '登录成功',
                //             // })
                //             // 存储用户的数据到 token
                //             uni.setStorageSync('user', data.data.token)

                //         } else {
                //             uni.showToast({
                //                 icon: 'none',
                //                 title: data.errmsg
                //             })
                //         }
                //     }
                // })
                var obj = this.from;
                if (obj.username && obj.password) { // 判断账号密码是否输入数据
                    // 账号密码输入的进入这里,// $api是封装网络请求js文件
                    this.$api.post('/wx/auth/login', this.from).then(res => { //封装的网络请求写法
                        console.log(res)
                        const data = res.data
                        // if (data.errno == 0) { //判断账号密码是否正确
                        // 正确进入这里,// $ui是显示对话框封装js文件
                        this.$ui.showSuccess("登录成功") // 封装的显示对话框写法
                        //存储token
                        uni.setStorageSync('user', data.data.token)
                        // //跳转至首页
                        setTimeout(() => {
                            uni.switchTab({
                                url: '/pages/index/index'
                            })
                        }, 1000)
                        // } else {
                        //     // 不正确进入这里
                        //     uni.showToast({
                        //         icon: 'none',
                        //         title: data.errmsg
                        //     })
                        // }
                    })
                } else {
                    // 账号密码未输入的进入这里
                    uni.showToast({
                        title: "信息不能为空",
                        icon: 'none'
                    })
                }
            },
            //注册点击事件
            zhu() {
                uni.navigateTo({
                    url: '/pages/zhuce/zhuce'
                })
            },
            //忘记密码点击事件
            wangji() {
                uni.navigateTo({
                    url: '/pages/wangjimima/wangjimima'
                })
            },
            //切换登录方式点击事件
            wei() {
                uni.showLoading({
                    title: '正在验证登录账号'
                });
                setTimeout(() => {
                    uni.hideLoading()
                }, 1000) //提示框延时一秒
            },
        }
    }
</script>

<style>
    /* 验证码-注册样式 */
    .zhuce {
        width: 680rpx;
        margin: auto;
        font-size: 30rpx;
        display: flex;
        /* 两边对齐 */
        justify-content: space-around;
        /* 盒子并排靠左 */
        flex-direction: row;
        /* 元素并排 */
        flex-wrap: nowrap;
        justify-content: space-between;
        color: #383838;
    }

    /* 用户协议 */
    .propertyBox {
        width: 100%;
        display: flex;
        font-size: 26rpx;
        position: fixed;
        bottom: 50rpx;
        justify-content: center;
    }

    /* 头像样式 */
    .info_list1 {
        width: 150rpx;
        height: 150rpx;
        margin: 80rpx;
    }

    /* 忘记密码 */
    .wangji {
        width: 710rpx;
        display: flex;
        justify-content: flex-end;
        font-size: 25rpx;
        margin: 15rpx;
    }
</style>